<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原生JS编程艺术</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="tool.js"></script>
	<script type="text/javascript" src="base.js"></script>
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
	<section id="nav">
		<div class="container">
			<h3 class="title">动画导航</h3>
			<nav>
				<h3 hidden="hidden">动画导航</h3>
				<ul id="nav-above" class="nav-above">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<ul id="nav-black" class="nav-black">
					<li>0001</li>
					<li>0002</li>
					<li>0003</li>
					<li>0004</li>
				</ul>
				<div id="nav-move" class="nav-move">
					<ul id="nav-white" class="nav-white">
						<li>0001</li>
						<li>0002</li>
						<li>0003</li>
						<li>0004</li>
					</ul>
				</div>
			</nav>
		</div>
	</section>

	<section id="skin">
		<h3 class="title">换肤</h3>
		<div class="container" style="position: relative;">
			<div id="skin-move"></div>
			<ul id="skin-above">
				<li src="img/bg1.jpg" bgc="#E6E8E7"></li>
				<li src="img/bg2.jpg" bgc="#EAEEFA"></li>
				<li src="img/bg3.jpg" bgc="#E1E1E1"></li>
				<li src="img/bg4.jpg" bgc="#FEFEFE"></li>
			</ul>
			<figure>
				<img src="img/s1.png">
				<figcaption>更换皮肤</figcaption>
			</figure>
			<figure>
				<img src="img/s2.png">
				<figcaption>更换皮肤</figcaption>
			</figure>
			<figure>
				<img src="img/s3.png">
				<figcaption>更换皮肤</figcaption>
			</figure>
			<figure>
				<img src="img/s4.png">
				<figcaption>更换皮肤</figcaption>
			</figure>
		</div>
		<div class="clear"></div>
	</section>

	<section id="banner">
		<h3 class="title">轮播图</h3>
		<div class="container" style="position: relative;height: 300px;">
			<aside id="banner-left">
				<ul>
					<li>
						<span class="word">JavaScript</span>
						<span class="banner-cover"><span>
							JavaScript
						</span></span>
						<div class="banner-box">JavaScript</div>
					</li>
					<li>
						<span class="word">jQurey</span>
						<span class="banner-cover"><span>
							jQurey
						</span></span>
						<div class="banner-box">jQurey</div>
					</li>
					<li>
						<span class="word">BootStrap</span>
						<span class="banner-cover"><span>
							BootStrap
						</span></span>
						<div class="banner-box">BootStrap</div>
					</li>
					<li>
						<span class="word">HTML5&amp;CSS3</span>
						<span class="banner-cover"><span>
							HTML5&amp;CSS3
						</span></span>
						<div class="banner-box">HTML5&amp;CSS3</div>
					</li>
					<li>
						<span class="word">AngularJS</span>
						<span class="banner-cover"><span>
							AngularJS
						</span></span>
						<div class="banner-box">AngularJS</div>
					</li>
				</ul>
			</aside>

			<div id="banner-center">
				<div class="banner-img-1 banner-img" style="opacity: 1;filter: alpha(opacity=100);">banner-img-1</div>
				<div class="banner-img-2 banner-img">banner-img-2</div>
				<div class="banner-img-3 banner-img">banner-img-3</div>
				
				<div class="banner-bottom">
					<ul class="banner-dot">
						<li style="color: #FF6666;">●</li>
						<li>●</li>
						<li>●</li>
					</ul>
					<strong class="banner-text">banner-img-1</strong>
				</div>
			</div>
			
			<aside id="banner-right">
				<div class="banner-img-1 banner-img" style="opacity: 1;filter: alpha(opacity=100);">banner-img-1</div>
				<div class="banner-img-2 banner-img">banner-img-2</div>
				<div class="banner-img-3 banner-img">banner-img-3</div>
				
				<div class="banner-bottom">
					<ul class="banner-dot">
						<li style="color: #FF6666;">●</li>
						<li>●</li>
						<li>●</li>
					</ul>
					<!-- <strong class="banner-text">banner-img-1</strong> -->
				</div>
			</aside>
		</div>
	</section>

	<section id="load">
		<h3 class="title">弹窗拖拽&amp;预加载</h3>
		<div class="container" style="position: relative;">
			<div id="load-move"></div>
			<ul id="load-above">
				<li src="img/lb1.jpg"></li>
				<li src="img/lb2.jpg"></li>
				<li src="img/lb3.jpg"></li>
				<li src="img/lb4.jpg"></li>
				<li src="img/lb5.jpg"></li>
			</ul>
			<figure>
				<div class="img">
					<img src="img/ls1.jpg">
				</div>
				<figcaption>弹框加载大图</figcaption>
			</figure>
			<figure>
				<div class="img">
					<img src="img/ls2.jpg">
				</div>
				<figcaption>弹框加载大图</figcaption>
			</figure>
			<figure>
				<div class="img">
					<img src="img/ls3.jpg">
				</div>
				<figcaption>弹框加载大图</figcaption>
			</figure>
			<figure>
				<div class="img">
					<img src="img/ls4.jpg">
				</div>
				<figcaption>弹框加载大图</figcaption>
			</figure>
			<figure>
				<div class="img">
					<img src="img/ls5.jpg">
				</div>
				<figcaption>弹框加载大图</figcaption>
			</figure>
		</div>
		<div class="clear"></div>
		<section id="drag">
			<div class="box">
				<div class="head">
					<h3>拖拽&amp;预加载</h3>
					<div class="close">&times;</div>
				</div>
				<div class="body">
					<img src="img/loading.gif" class="loading">
					<img src="img/lb3.jpg" class="img">
					<span id="go-left">&lt;</span>
					<span id="go-right">&gt;</span>
					<div id="img-left"></div>
					<div id="img-right"></div>
				</div>
			</div>	
		</section>
	</section>
	<div id="screen"></div>

	<section id="message">
		<h3 class="title"><span style="letter-spacing: 1px">ajax</span>留言板</h3>
		<div class="container">
			<div class="left">
				<form autocomplete="off" id="mes-form">
					<p><label for="user">用户名：</label><input type="text" id="user" name="user" placeholder="留下尊姓大名...">
						<span class="alert" style="display: block;">&nbsp;</span>
						<span class="info alert">用户名可以为中英文,不能有空格、数字不能开头、2-6位</span>
						<span class="danger alert">不合法</span>
						<span class="success alert">可用</span>
					</p>
					<p><label for="email">邮　箱：</label><input type="text" id="email" name="email" placeholder="请输入您的邮箱..." autocomplete="off">
						<span class="alert" style="display: block;">&nbsp;</span>
						<span class="info alert">请输入合法邮箱(1140457303@qq.com)</span>
						<span class="danger alert">不合法</span>
						<span class="success alert">可用</span>
						<ul id="email-list">
							<li><span class="text"></span>@qq.com</li>
							<li><span class="text"></span>@163.com</li>
							<li><span class="text"></span>@sina.com</li>
							<li><span class="text"></span>@sohu.com</li>
							<li><span class="text"></span>@gmail.com</li>
						</ul>
					</p>
					<p>
						<label style="vertical-align: 65px;">留　言：</label>
						<textarea name="content" id="content" placeholder="请留下您的脚印..."></textarea>
						<!-- <div style="position: relative;top: -15px;">您还可以输入 200 个字符！</div> -->
						<p class="total-word">
							<span style="color: #06f;">您还可以输入 <em class="count" style="color: green;">200</em> &nbsp;个字符！</span>
							<span style="color: maroon;">您已超过 <em class="count" style="color: #f60;">200</em> &nbsp;个字符！</span>
							<span style="color: red;">请输入有效内容!</span>
						</p>
					</p>
					<p>
						<button id="btn">提交</button>
					</p>
				</form>
			</div>
			<div class="right">
				
			</div>
			<div class="clear"></div>
		</div>
	</section>
	<footer>
		<a href="http://www.miitbeian.gov.cn">粤ICP备17107393号</a>　<span style="letter-spacing: 0">javaScript</span>项目演示
	</footer>
</body>
</html>